<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><router-link to="/customer/commemorationDay">客户纪念日管理</router-link></el-breadcrumb-item>
        <el-breadcrumb-item><i class="el-icon-date"></i> 编辑客户纪念日</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <basic-container>
        <el-form :model="categoryForm" label-width="130px" label-position="right">
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户">
                <select-customer-form 
                  :customerObj="{customerName: categoryForm.customerName, customerSn: categoryForm.customerSn}"
                  v-on:changeCustomer="handleSelectCustomer"/>
                <!-- <el-select @change="handleSelectCustomer" filterable class="fill-width" v-model="categoryForm.customerSn" style="float: left" placeholder="请选择">
                  <el-option
                    v-for="item in custmoerList"
                    :key="item.customerSn"
                    :label="item.customerName"
                    :value="item.customerSn">
                  </el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户联系人" required>
                <el-select filterable class="fill-width" v-model="categoryForm.linkmanId" style="float: left" placeholder="请选择">
                  <el-option
                    v-for="item in manList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="市场负责人">
                <el-select 
                  filterable 
                  remote 
                  :remote-method="remoteStaffList"
                  class="fill-width" 
                  v-model="categoryForm.directorId" 
                  style="float: left" 
                  placeholder="请选择">
                  <el-option
                    v-for="item in staffList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="纪念日类型" required>
                <el-select class="fill-width" v-model="categoryForm.anniversaryType" style="float: left" placeholder="请选择">
                  <el-option key="1" label="公司" value="1">
                  </el-option>
                  <el-option key="2" label="联系人" value="2">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="日历类型" required>
                <el-select class="fill-width" v-model="categoryForm.calendarType" style="float: left" placeholder="请选择">
                  <el-option key="1" label="公历" value="1">
                  </el-option>
                  <el-option key="2" label="农历" value="2">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="纪念日时间">
                <el-date-picker
                  class="fill-width"
                  v-model="categoryForm.anniversaryTime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="主题内容">
                <el-input v-model="categoryForm.content" type="textarea" class="form-input"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注">
                <el-input v-model="categoryForm.remarks" type="textarea" style="float: left;" class="form-input"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <div>
              <el-button type="primary" size="medium" @click="save">保存</el-button>
              <el-button type="default" size="medium" @click="close">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
    </basic-container>
    
  </div>
</template>

<script>
  import {getStore, setStore} from "@/util/store";
  import {
    fetchList,
  } from '@/api/crm/customer'
  import {
    fetchList as linkman,
  } from '@/api/crm/customerlinkman' //联系人
  import {
    putObj,getDetail
  } from '@/api/crm/customeranniversary'
  import {
    mapGetters
  } from 'vuex'
  import {fetchDict} from '@/util/util';
  import { fetchList as staffList } from '@/api/crm/marketemployee';
  import selectCustomerForm from '@/components/crm/select_customer_form';
  export default {
    data() {
      return {
        categoryForm:{},
        custmoerList:[],
        manList:[],
        staffList: [],
      }
    },
    computed: {
      ...mapGetters(['tagWel', 'tagList', 'tag', 'website']),
      tagLen() {
        return this.tagList.length || 0
      }
    },
    components: {
      selectCustomerForm,
    },
    created(){
      this.getList();
      this.init();
      this.getStaffList();
    },
    methods: {
      init(){
        let params = JSON.parse(this.$route.query.res).id;
        getDetail(params).then(response => {
          this.categoryForm = response.data.data;
        })
      },
      async handleSelectCustomer(customerObj) {
        if(this.categoryForm.customerSn === customerObj.customerSn) return;
        this.categoryForm.customerSn = customerObj.customerSn;
        this.categoryForm.customerName = customerObj.customerName;
        this.categoryForm.linkmanId = '';
        let res = await linkman({current: 1, size: 1000, customerSn: this.categoryForm.customerSn});
        this.manList = res.data.data.records;
      },
      //获取销售区域
      getList(page, params) {
        this.tableLoading = true
        fetchList({current: 1, size: 1000}).then(response => {
          this.custmoerList = response.data.data.records
        })
        linkman({current: 1, size: 1000}).then(response => {
          this.manList = response.data.data.records
        })
      },
      async remoteStaffList(name) {
        let query = {};
        if(name) query.name = name;
        let res = await staffList(Object.assign(query, {current: 1, size: 50}));
        this.staffList = res.data.data.records;
      },
      async getStaffList() {
        let res = await staffList({current: 1, size: 100});
        this.staffList = res.data.data.records;
      },
      //确定
      save(){
        let params = this.categoryForm;
        this.manList.forEach((item)=>{
          if(item.id == params.linkmanId){
            params.linkmanName = item.name;
          }
        })
        this.custmoerList.forEach((item)=>{
          if(item.customerSn == params.customerSn){
            params.customerName = item.customerName;
          }
        })
        this.staffList.forEach((item) => {
          if(item.id === params.directorId) {
            params.directorName = item.name;
          }
        })
        putObj(params).then(response => {
          if(response.data.code == 0){
            this.$message.success('编辑成功')
            let _this = this;
            setTimeout(function () {
              _this.close();
            },2000)
          }else{
            this.$message.success(response.data.msg)
          }
        })
      },
      close(){
        var str_before = location.href.split('#')[1];
        let { tag, key } = this.findTag(str_before);
        this.$store.commit('DEL_TAG', tag);
        this.$router.go(-1);
      },
      findTag(value) {
        let tag, key
        this.tagList.map((item, index) => {
          if (item.value === value) {
            tag = item
            key = index
          }
        })
        return { tag: tag, key: key }
      }
    }
  }
</script>

<style scoped lang="scss">
  .crumbs{
    margin: 20px 10px;
  }
</style>


